<template>
  <div class='modal-main'>
    <div class="modal-fixedTitle clearfix" id="gd-oilchangeflow-oil">
      <comCarInfoWrapper v-if="param_vin" :vin="param_vin" :subid="param_subid"></comCarInfoWrapper>
    </div>
    <div class='modal-content'>
      <div class="fg-carDetailBox">
        <div class="divcontent" v-html="divcontent"></div>
      </div>
    </div>
  </div>

</template>
<script>
import { mapState, mapGetters } from "vuex";
import comCarInfoWrapper from '@/components/com-carInfo-wrapper';
export default {
  components: {
    comCarInfoWrapper
  },
  created() {
    this.flowid = this.$route.query.tid || "";
  },
  computed: {
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  mounted() {
    this.initPage();
  },
  data() {
    return {
      param_vin: this.$com_util.getQueryString("vin"), //VIN码
      param_subid: this.$com_util.getQueryString("subid"), //SubId车型编号
      flowid: "", //文章编号
      divcontent: "",
    };
  },
  methods: {
    async initPage() {
      const res = await this.$imServive({
        url: "/Auto/GetOilChangeFlow",
        data: {
          flowId: this.flowid,
          vinCode: this.param_vin,
          autoModelSubId: this.param_subid,
        },
      });
      // if (res.Header.ErrorCode == 301) {
      //   //验证码验证
      //   window.location.href = window.location.protocol + "//" + window.location.host
      //     + "/sliderVerification.html?cf=1&gourl=" + encodeURIComponent(window.location.href);
      //   return;
      // }
      this.divcontent = res.Content;
    }
  }
};
</script>

<style scoped>
.divcontent {
  width: 100%;
}

.divcontent /deep/ .image img {
  width: 100% !important;
}

.divcontent /deep/ .hq-templatePage {
  width: 100%;
  height: auto;
  padding: 0.26rem 0.26rem 0;
  box-sizing: border-box;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage ul,
.divcontent /deep/ .hq-templatePage ol {
  list-style-type: none;
}

.divcontent /deep/ .hq-templatePage i {
  font-style: normal;
}

.divcontent /deep/ .hq-templatePage a:link,
a:active,
a:visited {
  text-decoration: none !important;
}

.divcontent /deep/ .hq-templatePage * {
  outline: none;
}

.divcontent /deep/ .hq-templatePage a:hover {
  text-decoration: underline;
}

.divcontent /deep/ .hq-templatePage table {
  border-collapse: collapse;
}

.divcontent /deep/ .hq-templatePage img {
  width: 100%;
}

.divcontent /deep/ .hq-templatePage ul {
  width: 100%;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage ul li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage ul li span {
  width: 0.53rem;
  height: auto;
  font-size: 0.34rem;
  line-height: 0.53rem;
  text-align: left;
  color: #666;
  flex-shrink: 0;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage ul li p {
  width: 100%;
  height: auto;
  font-size: 0.34rem;
  line-height: 0.53rem;
  text-align: justify;
  color: #666;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage .hq-redText ul li span {
  color: #e74c3c;
}

.divcontent /deep/ .hq-templatePage .hq-redText ul li p {
  color: #e74c3c;
}

.divcontent /deep/ .hq-templatePage .hq-precautions {
  width: 100%;
  height: auto;
  background: #ffeded;
  border: 1px solid #ff8686;
  border-radius: 0.1rem;
  padding: 0.32rem 0.53rem;
  margin-bottom: 0.26rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage .hq-precautionsTitle {
  width: 100%;
  background: url("../assets/images/icon_precautions.png") no-repeat left center;
  padding-left: 0.58rem;
  margin-bottom: 0.1rem;
  font-size: 0.42rem;
  font-weight: bold;
  line-height: 0.64rem;
  text-align: left;
  color: #e74c3c;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage .hq-oilChangeProcess {
  width: 100%;
  height: auto;
  margin-bottom: 0.26rem;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage .hq-oilChangeProcess img {
  width: auto;
  max-width: 100%;
}

.divcontent /deep/ .hq-templatePage .hq-sectionBox {
  width: 100%;
  height: auto;
  border-radius: 0.1rem;
  margin-bottom: 0.26rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage .hq-sectionTitle {
  width: 100%;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage .hq-sectionTitle span {
  width: 0.13rem;
  height: 0.37rem;
  margin-right: 0.26rem;
  background: #e74c3c;
  border-radius: 0.26rem;
  display: block;
  float: left;
  clear: left;
}

.divcontent /deep/ .hq-templatePage .hq-sectionTitle p {
  width: auto;
  height: auto;
  font-size: 0.42rem;
  font-weight: bold;
  line-height: 0.64rem;
  text-align: left;
  color: #282828;
  float: left;
  clear: none;
}

.modal-content {
  flex: 1;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  height: calc(100vh - 2.45rem);
}
.clearfix:after {
  content: "";
  /*设置内容为空*/
  height: 0;
  /*高度为0*/
  line-height: 0;
  /*行高为0*/
  display: block;
  /*将文本转为块级元素*/
  visibility: hidden;
  /*将元素隐藏*/
  clear: both;
  /*清除浮动*/
}
.clearfix {
  zoom: 1;
  /*为了兼容IE*/
}
.fg-carDetailBox {
  padding: 0 0.32rem 0.32rem;
}
.fg-carDetailBox-item {
  width: 100%;
  height: auto;
  display: block;
}
.gotoOilchangeflow-view {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
